<template>
  <ul style="overflow: auto;">
    <li v-if="!list.length" style="margin-top: 50px;text-decoration-line: underline;color: red">无查询结果</li>
    <li v-for="(it,i) in list" :key="i" @click="index=i">
      <span v-if="index===i" class="select">{{ i }},{{ it }}</span>
      <span v-else class="unselect">{{ i }},{{ it }}</span>
    </li>
  </ul>
</template>

<script setup>
import {defineModel, inject} from "vue";

const list = defineModel()
const index = inject('index')
</script>

<style scoped>
ul {
  height: 150px;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  margin: 3px;
}

ul .unselect {
  background: lavender;
}

ul .unselect:hover {
  background-color: bisque;
  cursor: pointer;
}

ul .select {
  background: lime;
}

</style>
